<template>
  <div class="d-flex w-100 h-100">
    <div style="width: 75%; height: 100%">
      <div
        :id="echartsId"
        class="w-100"
        style="height: 90%; position: relative"
      ></div>
    </div>

    <div style="width: 25%; height: 100%" v-if="fakeLabel_visible">
      <fakeLenfend
        style="width: 100%; height: 90%"
        :color="useOptions().colors.value.slice(0, echartsData.length)"
        :text="echartsData.map((item:any)=>item.name)"
        :orient="'column'"
      >
      </fakeLenfend>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useOptions } from "@/hook/useOptions";
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
  echartsId: {
    type: String,
    default: () => [],
  },
  fakeLabel_visible:{
    type:Boolean,
   default:true
  }
});
var colors = useOptions().colors.value;

var total = props.echartsData.reduce((p, v: any) => {
  return p + v.value;
}, 0);
let option = {
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },
  color: colors,
  calculable: true,
  series: [
    {
      type: "pie",
      radius: ["30%", "65%"],
      center: ["50%", "50%"],
      //  roseType: 'radius',
      label: {
        show: true,
        color: "inherit",
        position: "outside",
        fontSize: 14,
        formatter: "{b} {d}%",
      },
      labelLine: {
        length: 1,
        length2: 20,
        smooth: true,
      },
      data: props.echartsData,
    },
  ],
};
let myChart: any = null;

onMounted(() => {
  myChart = echarts.init(
    document.getElementById(props.echartsId) as HTMLElement
  );

  myChart.setOption(option);
});
onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style></style>
